<script setup lang="ts">
import {ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {renderIcon} from "@/utils/xicons.ts";
import {ChevronDown} from "@vicons/tabler";


interface ITabs {
    name: string;
    path: string;
    affix: boolean;
}


const route = useRoute();
const router = useRouter();


// 标签页相关
const activeKey = ref<string>("/dashboard");
const visibleTabs = ref<ITabs[]>([
    {
        name: "仪表盘",
        path: "/dashboard",
        affix: true
    }
]);


const tabMenuOptions = ref([
    {
        label: "关闭当前",
        key: "close-current",
        icon: () => renderIcon("Separator")
    },
    {
        label: "关闭其他",
        key: "close-other",
        icon: () => renderIcon("ArrowsLeftRight")
    },
    {
        label: "关闭全部",
        key: "close-all",
        icon: () => renderIcon("X")
    },
]);


/**
 * 添加标签页
 * @param view
 */
const handleAddTab = (view: ITabs) => {
    const isExist = visibleTabs.value.some(tab => tab.path === view.path);
    if (!isExist) {
        visibleTabs.value.push(view);
    }
    activeKey.value = view.path;
}


/**
 * 关闭标签页
 * @param path
 */
const handleCloseTab = (path: string) => {
    const tabIndex = visibleTabs.value.findIndex(tab => tab.path === path);
    if (tabIndex === -1) {
        return;
    }
    if (path === activeKey.value) {
        const nextTab = visibleTabs.value[tabIndex - 1] || visibleTabs.value[tabIndex + 1];
        if (nextTab) {
            router.push(nextTab.path);
        }
    }
    visibleTabs.value = visibleTabs.value.filter(tab => tab.path !== path);
}


/**
 * 关闭其他标签页
 */
const handleCloseOtherTabs = () => {
    visibleTabs.value = visibleTabs.value.filter(tab => tab.affix || tab.path === activeKey.value);
}


/**
 * 关闭所有标签页
 */
const handleCloseAllTabs = () => {
    const affixTabs = visibleTabs.value.filter(tab => tab.affix);
    visibleTabs.value = affixTabs;
    if (affixTabs.length) {
        router.push(affixTabs[0].path);
    }
}


/**
 * 切换标签页
 * @param key
 */
const handleChangeTab = (key: string) => {
    router.push(key);
}


const handleSelectTabMenu = (key: string) => {
    switch (key) {
        case "close-other":
            handleCloseOtherTabs();
            break;
        case "close-all":
            handleCloseAllTabs();
            break;
        case "close-current":
            handleCloseTab(activeKey.value);
    }
}


watch(() => route.path, (path: string) => {
    handleAddTab({
        name: route.meta?.breadcrumb as string || route.name as string,
        path: path,
        affix: false
    });
}, {immediate: true})
</script>

<template>
    <div class="tabs-container">
        <n-tabs v-model:value="activeKey"
                type="card" size="small"
                closable
                animated
                @update:value="handleChangeTab"
                @close="handleCloseTab"
        >
            <n-tab
                v-for="tab in visibleTabs"
                :key="tab.path"
                :name="tab.path"
                :closable="!tab.affix"
                :tab="tab.name"
            >
                {{ tab.name }}
            </n-tab>
        </n-tabs>

        <div class="tabs-tools">
            <n-dropdown :options="tabMenuOptions" @select="handleSelectTabMenu">
                <n-button quaternary circle>
                    <template #icon>
                        <ChevronDown/>
                    </template>
                </n-button>
            </n-dropdown>
        </div>
    </div>
</template>

<style lang="scss">
.tabs-container {
    padding: 2px 10px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    > .n-tabs {
        > .n-tabs-nav {
            .n-tabs-tab {
                height: 34px;
                padding: 0 12px;
                border-radius: 3px;
                transition: all .3s ease;
                border: none !important;

                &:hover {
                    background-color: #f5f5f5;
                }
            }

            .n-tabs-tab--active {
                background-color: #e7f5ee !important;
                border: none;
            }

            .n-tabs-tab-pad, .n-tabs-pad {
                border-bottom: none !important;
            }
        }
    }

    .tabs-tools {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>